<template>

    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box">
            <div class="form-title">查看广告</div>
            <el-form label-width="100px" class="app-content form" label-position="right">
                  <div class="form-item">
                      <div class="form-item-title">
                          <span class="title-level">广告类型与名称</span>
                      </div>
                      <div class="form-content">
                          <el-row :gutter="41">
                            <el-col :span="10">
                              <el-form-item label="广告类型：">
                                <span>{{dataForm.advertType == '3' ? '周边教育' : dataForm.advertType == '4' ? '课程学习' :''}}</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="10">
                              <el-form-item label="广告名称：" label-width="120px">
                                <span>{{dataForm.advertName}}</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                      </div>
                  </div>

                  <div class="form-item">
                      <div class="form-item-title">
                          <span class="title-level" v-if="dataForm.weight == null">广告创建时间</span>
                          <span class="title-level" v-else>广告创建时间与权重</span>
                      </div>
                      <div class="form-content">
                          <el-row :gutter="41">
                            <el-col :span="10">
                              <el-form-item label="创建时间：">
                                <span>{{dataForm.createTime == null? '--' : dataForm.createTime}}</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="10" v-if="dataForm.weight !== null">
                              <el-form-item label="权重：" label-width="120px">
                                <span>{{dataForm.weight == null? '0' : dataForm.weight}}</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                      </div>
                  </div>

                  <div class="form-item">
                      <div class="form-item-title">
                          <span class="title-level">广告可见级别与点击次数</span>
                      </div>
                      <div class="form-content">
                          <el-row :gutter="41">
                            <el-col :span="10">
                              <el-form-item label="可见级别：">
                                <span>{{dataForm.level == '0' ? '全国' : dataForm.level == '1' ? '省级' : dataForm.level == '2' ? '市级' : dataForm.level == '3' ? '区级' : '--'}}</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="10">
                              <el-form-item label="点击次数：" label-width="120px">
                                <span>{{dataForm.clickNum == null? '0' : dataForm.clickNum}}</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                      </div>
                  </div>

                  <div class="form-item">
                      <div class="form-item-title">
                          <span class="title-level">发布人和发布信息区域</span>
                      </div>
                      <div class="form-content">
                          <el-row :gutter="41">
                            <el-col :span="10">
                              <el-form-item label="发布人：">
                                <span>{{dataForm.issue == null? '--': dataForm.issue}}</span>
                              </el-form-item>
                            </el-col>
                            <el-col :span="10">
                              <el-form-item label="发布信息区域：" label-width="120px">
                                <span>{{dataForm.orgName == null?  '--': dataForm.orgName}}</span>
                              </el-form-item>
                            </el-col>
                          </el-row>
                      </div>
                  </div>

                  <div class="form-item">
                      <div class="form-item-title">
                          <span class="title-level">广告图片</span>
                      </div>
                      <div class="form-content check-img">
                          <el-row :gutter="41" style="padding: 10px 0 20px 14px;">
                            <el-col :span="10">
                              <div v-if="dataForm.advertPic !== null"><img :src="dataForm.advertPic" alt=""></div>
                              <div v-else-if="dataForm.iosOnePic !== null"><img :src="dataForm.iosOnePic" alt=""></div>
                              <div v-else-if="dataForm.androidPic !== null"><img :src="dataForm.androidPic" alt=""></div>
                              <div v-else-if="dataForm.iosTwoPic !== null"><img :src="dataForm.iosTwoPic" alt=""></div>
                              <div v-else><img :src="dataForm.iosThreePic" alt=""></div>
                            </el-col>
                          </el-row>
                      </div>
                  </div>

                  <div class="form-item">
                      <div class="form-item-title">
                          <span class="title-level">广告链接或自定义内容</span>
                      </div>
                      <div class="form-content">
                          <el-row :gutter="41" style="padding: 10px 0 20px 14px;">
                            <el-col :span="21" style="font-size:14px">
                              <span v-if="dataForm.showType =='1'" v-html="dataForm.html"></span>
                              <span v-else>链接：{{dataForm.link === ''? '--':dataForm.link}}</span>
                            </el-col>
                          </el-row>
                      </div>
                  </div>
                  
                  <!--<div class="form-item">
                      <div class="form-item-title">
                          <span class="title-level">投放区域</span>
                      </div>
                      <div class="form-content">
                          <el-row :gutter="41">
                            <el-col :span="10">
                              <el-form-item label="省份">
                                <province :disabled='true' v-model="dataForm.provinceId"></province>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row :gutter="41">
                            <el-col :span="10">
                              <el-form-item label="城市">
                                <city :disabled='true' v-model="dataForm.cityId" :province="dataForm.provinceId" ></city>
                              </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row :gutter="41">
                            <el-col :span="10">
                              <el-form-item label="区县">
                                <region :disabled='true' v-model="dataForm.areaId" :city="dataForm.cityId" ></region>
                              </el-form-item>
                            </el-col>
                          </el-row>
                      </div>
                  </div>-->

                  <div class="form-item area">
                        <div class="form-item-title">
                            <span class="title-level">投放区域</span>
                        </div>
                        <div class="form-content">
                            <div class="content">
                                <label>省份：</label>
                                <span class="inner-content">{{dataForm.provinceName===null? '--':dataForm.provinceName}}</span>
                            </div>

                            <div class="content">
                                <label>城市：</label>
                                <span class="inner-content">{{dataForm.cityName===null? '--':dataForm.cityName}}</span>
                            </div>

                            <div class="content">
                                <label>区县：</label>
                                <span class="inner-content">{{dataForm.areaName===null? '--':dataForm.areaName}}</span>
                            </div>
                        </div>
                    </div>

                  <div class="form-item" v-if = "dataForm.companyStatus == '1'">
                      <div class="form-item-title">
                          <span class="title-level">审核记录</span>
                      </div>
                      <div class="form-content">
                          <el-row :gutter="41" style="padding: 10px 0 80px 14px">
                            <el-col :span="21">
                              <el-table :data="dataForm.lAudit" style="width: 100%">
                                  <el-table-column prop="auditor" label="审核人"></el-table-column>
                                  <el-table-column prop="checkTime" label="审核时间"></el-table-column>
                                  <el-table-column prop="status" label="审核状态"></el-table-column>
                                  <el-table-column prop="desc" label="审核描述"></el-table-column>
                              </el-table>
                            </el-col>
                          </el-row>
                      </div>
                  </div>

                  <div class="form-item">
                      <div class="form-content">
                          <el-row :gutter="41" type="flex" justify="center">
                            <el-col :span="2"><el-button @click="cancel">返回</el-button></el-col>
                          </el-row>
                      </div>
                  </div>
            </el-form>
        </div>
    </div>

    <!-- <div class="main-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading="loading">
            <el-form :model="dataForm" ref="dataForm"  class="form" label-width="110px" label-position='right'>
                <div class="top-title">查看广告</div>
                <span class="title">广告类型与名称</span>
                <el-row :gutter="41" style="padding-bottom: 28px">
                  <el-col :span="10">
                    <el-form-item label="广告类型：" style="padding-left:14px">
                      <span>{{dataForm.advertType == '4' ? '周边教育' : dataForm.advertType == '3' ? '课程学习' :''}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="广告名称：" style="padding-left:14px">
                      <span>{{dataForm.advertName}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                
                <span class="title" v-if="dataForm.weight == null">广告创建时间</span>
                <span class="title" v-else>广告创建时间与权重</span>
                <el-row :gutter="41" style="padding-bottom: 28px">
                  <el-col :span="10">
                    <el-form-item label="创建时间：" style="padding-left:14px">
                      <span>{{dataForm.createTime}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" v-if="dataForm.weight !== null">
                    <el-form-item label="权重：" style="padding-left:14px">
                      <span>{{dataForm.weight == null? '0' : dataForm.weight}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>


                <span class="title">广告可见级别与点击次数</span>
                <el-row :gutter="41" style="padding-bottom: 28px">
                  <el-col :span="10">
                    <el-form-item label="可见级别：" style="padding-left:14px">
                      <span>{{dataForm.level == '0' ? '全国' : dataForm.level == '1' ? '省级' : dataForm.level == '2' ? '市级' : dataForm.level == '3' ? '区级' : ''}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="点击次数：" style="padding-left:14px">
                      <span>{{dataForm.clickNum == null? '0' : dataForm.clickNum}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">发布人和发布信息区域</span>
                <el-row :gutter="41" style="padding-bottom: 28px">
                  <el-col :span="10">
                    <el-form-item label="发布人：" style="padding-left:14px">
                      <span>{{dataForm.issue == null? '暂无': dataForm.issue}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="发布信息区域：" style="padding-left:14px">
                      <span>{{dataForm.orgName == null?  '暂无': dataForm.orgName}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <span class="title">广告图片</i></span>
                <el-row :gutter="41" style="padding: 10px 0 50px 14px;">
                  <el-col :span="10">
                    <div v-if="dataForm.advertPic !== null"><img style = "max-width:1000px" :src="dataForm.advertPic" alt=""></div>
                    <div v-else-if="dataForm.iosOnePic !== null"><img style = "max-width:1000px" :src="dataForm.iosOnePic" alt=""></div>
                    <div v-else-if="dataForm.androidPic !== null"><img style = "max-width:1000px" :src="dataForm.androidPic" alt=""></div>
                    <div v-else-if="dataForm.iosTwoPic !== null"><img style = "max-width:1000px" :src="dataForm.iosTwoPic" alt=""></div>
                    <div v-else><img :src="dataForm.iosThreePic" alt=""></div>
                  </el-col>
                </el-row>
                <span class="title">广告链接或自定义内容</span>
                <el-row :gutter="41" style="padding: 10px 0 50px 14px;">
                  <el-col :span="21" style="font-size:14px">
                    <span v-if="dataForm.showType =='1'" v-html="dataForm.html"></span>
                    <span v-else>链接：{{dataForm.link}}</span>
                  </el-col>
                </el-row>
                <div v-if = "dataForm.companyStatus == '1'">
                  <div class="man-bom"></div>
                  <span class="title">审核记录</span>
                  <el-row :gutter="41" style="padding: 10px 0 80px 14px">
                    <el-col :span="21">
                      <el-table :data="dataForm.lAudit" style="width: 100%">
                          <el-table-column prop="auditor" label="审核人"></el-table-column>
                          <el-table-column prop="checkTime" label="审核时间"></el-table-column>
                          <el-table-column prop="status" label="审核状态"></el-table-column>
                          <el-table-column prop="desc" label="审核描述"></el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </div>
                <div class="man-bom"></div>
                <el-row :gutter="41" type="flex" justify="center">
                  <el-col :span="2"><el-button @click="cancel">返回</el-button></el-col>
                </el-row>
                <div class="man-bom"></div> -->
            

</template>

<script>
import Levelbar from '../../../layout/Levelbar';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import { getAdvertInfoById } from 'api/advApi';
export default {
    name: 'getAdv',
    components: { province, city, region, Levelbar },
    data() {
        return {
            dataForm: {},
            loading: false
        };
    },
    created() {
        this.getAdvObj()
    },
    computed: {},
    methods: {
        getAdvObj() {
            this.loading = true;
            getAdvertInfoById(this.$route.params.id).then(data => {
                this.loading = false;
                this.dataForm = data.data.content;
            }).catch(Error => {
                this.loading = false;
            })
        },
        cancel() {
            this.$router.go(-1)
        }
    }
};
</script>

<style lang="scss" scoped>
    @import "../../../../../static/tinymce/skins/lightgray/content.min.css";
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    $bgcolor: #fff;

    @mixin showTitle() {
        background: $bgcolor;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    }
    .form-box {
        padding: 0 50px;
        @include showTitle();
        .form-title {
        padding-top:8px;
        text-align: center;
        font-size: 18px;
        color: #333;
        line-height: 72px;
        font-weight: bold;
        font-family: Microsoft YaHei;
        border-bottom: 1px solid #ddd;
        }
        .form {
        .form-item {
            padding-bottom: 40px;
            overflow: hidden;
            &.area{
              .content{
                width: 100%;
              }
            }
            .form-item-title {
                margin: 40px 0;
                font-size: 14px;
                color: #333;
                line-height: 14px;
                border-left: 4px solid #ff5e2c;
                text-indent: 16px;
            
            .note-css {
                vertical-align: middle;
                display: inline-block;
                width: 4px;
                height: 14px;
                margin-right: 26px;
                border-left: 3px solid #ff5e2c;
            }
            }
            .content{
                float: left;
                width: 50%;
                padding-bottom: 20px;
                font-size: 14px;
                color: #666;
                label{
                    display: inline-block;
                    width: 100px;
                    padding-right: 20px;
                    text-align: right;
                }
                .inner-content{
                    font-size: 14px;
                    color: #333;
                }
            }
            .subjectKuang{
                padding:5px 5px 40px 5px;
                width:470px;
            }
            .el-tag{
                margin-left:10px;
                background:#f9f9f9;
                color:#444;
            }
            .footer {
            //float: right;
            text-align: center;
            margin-top: 40px;
            }
        }
        }
    }
}
.top-title{
    text-align: center;
    font-size: 18px;
    color: #333;
    height: 78px;
    line-height: 78px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}
.main-container {
  position: relative;
  padding: 20px 20px 10px;
}
.form-box{
    position: relative;
    padding: 20px 30px 10px;
    background: #fff;
}
.man-bom {
  margin: 20px 0;
}
.box {
  margin: 20px 0;
}
.title {
  position: relative;
  font-size: 14px;
  color: rgb(106, 85, 72);
  padding-left: 14px;
  margin: 40px 0;
  display: block;
  &::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: 0;
    top: 4px;
  }
}
.describe {
  font-size: 14px;
  color: #666;
  margin: 20px 0;
}
i {
  font-style: normal;
  color: #999;
}
.el-upload-new {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload-picture-new {
  border-radius: 6px;
  background-color: #fbfdff;
  border: 1px dashed transparent;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  i {
    font-size: 28px;
    color: #8c939d;
  }
}
.check-img{
  img{
    display: inline-block;
    max-width: 700px;
    // height: 220px;
  }
}
.panel-body img {
    max-width: 700px;
    height: auto;
}
</style>